<script lang="ts" setup>
import {nextTick, reactive, ref} from "vue";
import {getMenuTree, getMenuPermissionsByRole} from '@/api/system'
import DataForm from "@/components/data-form/index.vue";
import {env} from "@/utils";

const dataFormRef = ref<InstanceType<typeof DataForm>>();
const enums = ref<{[key:string]: any}>({});
const menuTreeRef = ref();
const menuTreeData = ref<any[]>([]);
const menuTreeChecked = ref<string[]>([]);
const form = reactive({
    roleId: undefined,
    roleName: undefined,
    alias: undefined,
    remark: undefined,
    checks: undefined,
    menus: [],
})

const onBeforeSubmit = (done) => {
    if (env.APP_VERSION === '3.0.0') {
        let checked = menuTreeRef.value?.getCheckedNodes(false);
        let halfChecked = menuTreeRef.value?.getHalfCheckedNodes();
        form.menus = [...checked, ...halfChecked]
    } else {
        let checked = menuTreeRef.value?.getCheckedKeys(false);
        let halfChecked = menuTreeRef.value?.getHalfCheckedKeys();
        form.menuId = [...checked, ...halfChecked];
    }
    done();
}

const open = (options: OpenFormConfig) => {
    getMenuTree().then(({code, data}) => {
        if (code === 200){
            menuTreeData.value = data.rows;
        }
    }).then(() => {
        if (env.APP_VERSION === '3.0.0') {
            const data = options.type === 'post'? options.data:[options.data];

            const temp = {checks: [], menus: []}
            data.reduce((pre, cur) => {
                pre.checks.push({label: cur.alias, value: cur.roleId});
                pre.menus.push(...cur.menus.map(item => item.menuId));
                return pre;
            }, temp)
            enums.value.checks = temp.checks;
            menuTreeChecked.value = [...new Set(temp.menus)];

            if (Array.isArray(options.data)) options.data = {}
            options.data.checks = enums.value.checks.map((item: any) => item.value);
        } else {
            if (options.type === 'post') {
                //新增
                enums.value.checks = options?.data?.map((item: any) => ({label: item.alias, value: item.roleId})) || [];
                options.data = {};
                options.data.checks = enums.value.checks.map((item: any) => item.value);
            } else {
                //修改
                enums.value.checks = [{label: options.data.alias, value: options.data.roleId}];
                options.data.checks = [options.data.roleId];
            }
        }
    }).then(() => {
        if (env.APP_VERSION === '3.0.0') {
            dataFormRef.value?.open(options);
        } else {
            getMenuPermissionsByRole(options.data.checks).then(({code, data}) => {
                if (code === 200) {
                    menuTreeChecked.value = data || []
                    nextTick(() => dataFormRef.value?.open(options))
                }
            })
        }
    })
};

defineExpose({open})
</script>

<template>
    <data-form ref="dataFormRef" :model="form" description="角色" :rule-field="['roleName', 'alias']" :before-submit="onBeforeSubmit">
        <el-form-item prop="roleId" v-show="false">
            <el-input v-model="form.roleId"/>
        </el-form-item>
        <el-form-item label="英文名称" prop="roleName">
            <el-input v-model="form.roleName"/>
        </el-form-item>
        <el-form-item label="中文名称" prop="alias">
            <el-input v-model="form.alias"/>
        </el-form-item>
        <el-form-item label="描述" prop="remark">
            <el-input v-model="form.remark"/>
        </el-form-item>
        <el-form-item label="继承角色" prop="checks">
            <el-select v-model="form.checks" disabled multiple>
                <el-option v-for="(item, index) in enums.checks" :key="index" :label="item.label" :value="item.value"/>
            </el-select>
        </el-form-item>
        <el-form-item label="权限分配" prop="menuId">
            <el-tree ref="menuTreeRef"
                     :accordion="true"
                     :check-strictly="true"
                     :check-on-click-node="true"
                     :data="menuTreeData"
                     :default-checked-keys="menuTreeChecked"
                     :expand-on-click-node="true"
                     :show-checkbox="true"
                     node-key="menuId"
                     style="height: 30vh; width: 100%; overflow: auto">
                <template #default="{ node, data }">
                    <span v-if="data.type === '1' && data.parentId !== '0'">{{ node.label }}&nbsp;({{data.perms}})</span>
                </template>
            </el-tree>
        </el-form-item>
    </data-form>
</template>
